<template>
    <div class="work-order-internal-transfer">
      <h2>内部转发工单</h2>
      
      <!-- 待内部转发工单表格 -->
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>待内部转发工单</span>
          </div>
        </template>
        <el-table
          :data="pendingWorkOrders"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          ref="workOrderTable"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="工单ID" width="100"></el-table-column>
          <el-table-column prop="title" label="工单标题" width="200"></el-table-column>
          <el-table-column prop="status" label="状态" width="100"></el-table-column>
          <el-table-column prop="created_at" label="创建时间"></el-table-column>
        </el-table>
      </el-card>
  
      <!-- 内部转发按钮 -->
      <div style="margin-top: 20px; text-align: right">
        <el-button type="primary" @click="openTransferDialog" :disabled="selectedWorkOrderIds.length === 0">内部转发</el-button>
      </div>
  
      <!-- 内部转发确认弹窗 -->
      <el-dialog
        v-model="dialogVisible"
        title="确认内部转发"
        width="50%"
      >
        <el-form label-width="120px">
          <el-form-item label="工单ID">
            <el-tag v-for="id in selectedWorkOrderIds" :key="id" style="margin-right: 10px">{{ id }}</el-tag>
          </el-form-item>
          <el-form-item label="当前责任人">
            <el-input v-model="transferForm.currentAssignee" disabled></el-input>
          </el-form-item>
          <el-form-item label="新责任人">
            <el-select
              v-model="transferForm.newAssignee"
              placeholder="请选择新责任人"
              style="width: 100%"
            >
              <el-option
                v-for="user in users"
                :key="user.id"
                :label="user.name"
                :value="user.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="其余员工">
            <el-select
              v-model="transferForm.otherEmployees"
              multiple
              placeholder="请选择其余员工"
              style="width: 100%"
            >
              <el-option
                v-for="user in users"
                :key="user.id"
                :label="user.name"
                :value="user.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="内部转发时间">
            <el-date-picker
              v-model="transferForm.transferTime"
              type="datetime"
              placeholder="选择内部转发时间"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="意见备注">
            <el-input
              v-model="transferForm.remark"
              type="textarea"
              placeholder="请输入意见备注"
              :rows="4"
            ></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitTransfer">确认转发</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref  } from 'vue'
  import { ElMessage } from 'element-plus'
  
  // 定义工单接口
  interface WorkOrder {
    id: string
    title: string
    status: string
    created_at: string
    assignee: string
  }
  
  // 定义用户接口
  interface User {
    id: string
    name: string
  }
  
  // 待内部转发工单列表（模拟数据）
  const pendingWorkOrders = ref<WorkOrder[]>([
    { id: 'WO-001', title: '系统维护工单', status: '处理中', created_at: '2023-10-01', assignee: 'U-001' },
    { id: 'WO-002', title: '用户反馈工单', status: '处理中', created_at: '2023-10-02', assignee: 'U-002' },
    { id: 'WO-003', title: '功能优化工单', status: '处理中', created_at: '2023-10-03', assignee: 'U-003' }
  ])
  
  // 用户列表（模拟数据）
  const users = ref<User[]>([
    { id: 'U-001', name: '张三' },
    { id: 'U-002', name: '李四' },
    { id: 'U-003', name: '王五' }
  ])
  
  // 表单数据
  const transferForm = ref({
    currentAssignee: '',
    newAssignee: '',
    otherEmployees: [],
    transferTime: '',
    remark: ''
  })
  
  // 选中的工单ID列表
  const selectedWorkOrderIds = ref<string[]>([])
  
  // 弹窗显示状态
  const dialogVisible = ref(false)
  
  // 表单引用
  const workOrderTable = ref()
  
  // 处理表格选择变化
  const handleSelectionChange = (selection: WorkOrder[]) => {
    selectedWorkOrderIds.value = selection.map(item => item.id)
  }
  
  // 打开内部转发确认弹窗
  const openTransferDialog = () => {
    if (selectedWorkOrderIds.value.length === 0) {
      ElMessage.warning('请至少选择一个工单')
      return
    }
  
    // 设置当前责任人
    const selectedWorkOrder = pendingWorkOrders.value.find(order => order.id === selectedWorkOrderIds.value[0])
    if (selectedWorkOrder) {
      const currentUser = users.value.find(user => user.id === selectedWorkOrder.assignee)
      if (currentUser) {
        transferForm.value.currentAssignee = currentUser.name
      }
    }
  
    dialogVisible.value = true
  }
  
  // 提交内部转发
  const submitTransfer = () => {
    if (!transferForm.value.newAssignee) {
      ElMessage.warning('请选择新责任人')
      return
    }
  
    if (!transferForm.value.transferTime) {
      ElMessage.warning('请选择内部转发时间')
      return
    }
  
    ElMessage.success('工单内部转发成功！')
    dialogVisible.value = false
    resetForm()
  }
  
  // 重置表单和选择
  const resetForm = () => {
    transferForm.value.currentAssignee = ''
    transferForm.value.newAssignee = ''
    transferForm.value.otherEmployees = []
    transferForm.value.transferTime = ''
    transferForm.value.remark = ''
    selectedWorkOrderIds.value = []
    workOrderTable.value?.clearSelection()
  }
  </script>
  
  <style scoped>
  .work-order-internal-transfer {
    padding: 20px;
  }
  
  .box-card {
    margin-bottom: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  </style>